<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>分类管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row class="addUser" >
                <el-col>
                    <el-button  type="primary" @click="addCategroyDialog">
                        添加用户
                    </el-button>
                </el-col>
            </el-row>
            <zk-table
            :data="categroyList"
            :columns="columns"
            :expand-type="false"
            :show-index="true"
            :index-text='this.props.indextext'
            :selection-type='false'
            >
            <template slot="info" slot-scope="scope">
                <i v-if="scope.row.cat_deleted===false" class="el-icon-check"></i>
                <i v-else class="el-icon-close"></i>
            </template>
             <template slot="sort" slot-scope="scope">
                <el-tag v-if="scope.row.cat_level===0">标签一</el-tag>
                <el-tag v-else-if="scope.row.cat_level===1" type="success">标签二</el-tag>
                <el-tag v-else type="info">标签三</el-tag>
            </template>
              <template slot="operate" >
                <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
                <el-button type="warning" size="mini" icon="el-icon-delete">删除</el-button>
            </template>
            </zk-table>
            <!-- 分页功能 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="getCategoryParam.pagenum"
                :page-sizes="[1, 5, 10, 20]"
                :page-size="getCategoryParam.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

        </el-card>
        <!-- 添加用户对话框 -->
        <el-dialog
            title="添加用户"
            :visible.sync="showCategroyDialog"
            width="30%"
            @close="closeDialog"
            >
            <!-- 添加分类表单 -->
            <el-form ref="addCategroyFromRef" validate-on-rule-change :model="addCategroyFrom" :rules="addCategroyFromRules" label-width="80px">
                <el-form-item prop="cat_name" label="添加分类">
                  <el-input  v-model="addCategroyFrom.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类"  >
                  <!-- options指定了数据源 -->
                  <!-- props是配置对象 -->
                  <el-cascader
                    v-model="selectCategory"
                    :options="ParentcategoryList"
                    :props="ParentcascaderProps"
                    :size="size"
                    clearable
                    @change="changeChecked">
                  </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showCategroyDialog = false">取 消</el-button>
                <el-button type="primary" @click="changeParentCategroy">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
  data () {
    return {
      getCategoryParam: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      //   获取到的商品分类信息
      categroyList: [],
      total: 0,
      //   表格的规则
      props: {
        indextext: '序号'
      },
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'

        },
        {
          label: '是否有效',
          type: 'template',
          template: 'info'

        },
        {
          label: '排序',
          type: 'template',
          template: 'sort'

        },
        {
          label: '操作',
          type: 'template',
          template: 'operate'
        }
      ],
      //   控制添加分类对话框
      showCategroyDialog: false,
      //   添加分类表单对象
      addCategroyFrom: {
        cat_level: 0,
        cat_pid: 0,
        cat_name: '多思考'
      },
      addCategroyFromRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ]
      },
      // 获取到的父级分类数据
      ParentcategoryList: [],
      ParentcascaderProps: {
        expandTrigger: 'hover',
        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
      },
      selectCategory: [],
      size: 'mini'
    }
  },
  created () {
    this.getcategoryList()
  },
  methods: {
    async getcategoryList () {
      const { data: res } = await this.$http.get('categories', { params: this.getCategoryParam })
      if (res.meta.status !== 200) {
        return this.$Message.error('请求商品分类失败')
      }
      this.categroyList = res.data.result
      this.total = res.data.total
    },
    handleSizeChange (val) {
      this.getCategoryParam.pagesize = val
      this.getcategoryList()
    },
    handleCurrentChange (val) {
      this.getCategoryParam.pagenum = val
      this.getcategoryList()
    },
    addCategroyDialog () {
      this.getParentCategoryList()
      this.showCategroyDialog = true
    },
    async getParentCategoryList () {
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
      if (res.meta.status !== 200) {
        return this.$Message.error('请求商品分类失败')
      }
      this.ParentcategoryList = res.data
    },
    changeChecked () {
      if (this.selectCategory.length > 0) {
        this.addCategroyFrom.cat_level = this.selectCategory.length
        this.addCategroyFrom.cat_pid = this.selectCategory[this.selectCategory.length - 1]
      } else {
        this.addCategroyFrom.cat_level = 0
        this.addCategroyFrom.cat_pid = 0
      }
    },
    async changeParentCategroy () {
      this.showCategroyDialog = false
      this.$refs.addCategroyFromRef.validate(async value => {
        if (!value) return
        console.log(this.addCategroyFrom)
        const { data: res } = await this.$http.post('categories', this.addCategroyFrom)
        if (res.meta.status !== 201) return this.$Message.error('失败')
        this.$Message.success('成功')
        this.getcategoryList()
      })
    },
    closeDialog () {
      this.$refs.addCategroyFromRef.resetFields()
      this.selectCategory = []
      this.addCategroyFrom.cat_level = 0
      this.addCategroyFrom.cat_pid = 0
    }

  }

}
</script>

<style lang="less" scoped>
    .addUser{
        margin-bottom: 15px;
    }
    el-cascader{
       height: 100px;
}
</style>
